<template>
    <div>
        <div class="n-layout-page-header">
            <n-card :bordered="false" title="系统介绍">
                <n-tag type="error">葛覃</n-tag> 是一个基于 vue3，vite，TypeScript
                的中后台解决方案，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你，持续更新中。
            </n-card>
        </div>
        <n-card :bordered="false" title="项目信息" class="mt-4 proCard" size="small" :segmented="{ content: true }">
            <n-descriptions bordered label-placement="left" class="py-2">
                <n-descriptions-item label="版本">
                    <n-tag type="info"> {{ version }} </n-tag>
                </n-descriptions-item>
                <n-descriptions-item label="最后编译时间">
                    {{ lastBuildTime }}
                </n-descriptions-item>
            </n-descriptions>
        </n-card>

        <n-card :bordered="false" title="开发环境依赖" class="mt-4 proCard" size="small" :segmented="{ content: true }">
            <n-descriptions bordered label-placement="left" class="py-2">
                <n-descriptions-item v-for="item in devSchema" :key="item.field" :label="item.field">
                    {{ item.label }}
                </n-descriptions-item>
            </n-descriptions>
        </n-card>

        <n-card :bordered="false" title="生产环境依赖" class="mt-4 proCard" size="small" :segmented="{ content: true }">
            <n-descriptions bordered label-placement="left" class="py-2">
                <n-descriptions-item v-for="item in schema" :key="item.field" :label="item.field">
                    {{ item.label }}
                </n-descriptions-item>
            </n-descriptions>
        </n-card>
    </div>
</template>

<script lang="ts" setup>
export interface schemaItem {
    field: string
    label: string
}

const { pkg, lastBuildTime } = __APP_INFO__
const { dependencies, devDependencies, version } = pkg

const schema: schemaItem[] = []
const devSchema: schemaItem[] = []

Object.keys(dependencies).forEach(key => {
    schema.push({ field: key, label: dependencies[key] })
})

Object.keys(devDependencies).forEach(key => {
    devSchema.push({ field: key, label: devDependencies[key] })
})
</script>
